<template>
  <div class="order-all">
    <div class="ipad-cont">
      <div class="main_list">
        <div class="list_top">
          <div class="family">+</div>
          <div class="family_name">-</div>
          <div class="invalid">我的订单</div>
        </div>
        <div class="list_bot">
          <table class="table">
            <tbody>
              <tr class="list_tit">
                <th>保险名称</th>
                <th>起保日期</th>
                <th>保障时间</th>
              </tr>
              <tr v-for="item in myOrder">
                <td>{{ item.orderName }}</td>
                <td>{{ item.ordertime }}</td>
                <td v-if="item.ontime == 60 * 60 * 24">24小时</td>
                <td v-else-if="item.ontime == 60 * 60 * 24 * 7">7天</td>
                <td v-else-if="item.ontime == 60 * 60 * 24 * 30">30天</td>
                <td v-else-if="item.ontime == 60 * 60 * 24 * 365">1年</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "homePage"
);
export default {
  created() {
    this.getMyOrder(localStorage._id);
  },
  computed: {
    ...mapState(["myOrder"]),
  },
  methods: {
    ...mapActions(["getMyOrder"]),
  },
};
</script>

<style lang="scss" scoped>
.order-all {
  .ipad-cont {
    padding-top: 8px;
    width: 100%;
    margin: 0 auto;
    .main_list {
      border: 1px solid #d9dbde;
      border-radius: 4px;
      background: #fff;
      margin-bottom: 64px;
      padding-bottom: 40px;
      box-shadow: 0 5px 20px #ccc;
      .list_top {
        height: 94px;
        padding-left: 36px;
        line-height: 94px;
        border-bottom: 1px solid #d9dbde;
        display: flex;
        align-items: center;
        .family {
          height: 36px;
          width: 36px;
          border-radius: 50%;
          background: #886cff;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          color: #fff;
        }
        .family_name {
          color: #333;
          margin-left: 13px;
        }
        .invalid {
          margin-left: 18px;
          font-size: 12px;
          color: #a8b0b5;
        }
      }
      .list_bot {
        padding: 3px 36px 0;
        .table {
          width: 100%;
          max-width: 100%;
          margin-bottom: 20px;
          border-collapse: collapse;
          border-spacing: 0;
          th,
          tr {
            height: 48px;
            text-align: center;
            border-bottom: 1px solid #d9dbde;
            font-size: 12px;
            color: #384457;
            border-top: none;
          }
        }
      }
    }
  }
}
</style>